<template>
  <div class="order">
    <el-table :data="tableData" stripe style="width: 100%" height="500">
      <el-table-column prop="scriptWritingTitle" label="剧本名称" width="180" fixed/>
      <el-table-column prop="tradeId" label="交易ID" >
        <template #default="scope">
            <span class="spanColor">{{strTrans(scope.row.tradeId)}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="buyerID" label="买/卖方ID" >
        <template #default="scope">
            <span class="spanColor">{{strTrans(scope.row.vendorID)}}</span>
        </template>
      </el-table-column>
        <el-table-column prop="price" label="金额" >
            <template #default="scope">
                <span>{{ scope.row.price == null ? '免费' : scope.row.price }}</span>
            </template>
        </el-table-column>
      <el-table-column prop="createTime" label="时间戳" width="200"/>
      <el-table-column label="我的操作" fixed="right">
        <template #default="scope">
            <el-button
            size="mini"
            type="danger" v-if="scope.row.tradeState==1"
            @click="handleDelete( scope.row)"
            >删除</el-button
            >
        </template>
      </el-table-column>
    </el-table>
     <div style="text-align:right;margin-top:20px">
         <el-pagination
        background
        v-model:currentPage="currentPage1"
        :page-sizes="[10, 15, 20, 25, 30]"
        :page-size="pageSize"
        layout="total,  prev, pager, next, sizes, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        >
        </el-pagination>
     </div>
  </div>
</template>
<script>
import {TradeInfoList,TradeInfoDel} from "@/api/TradeInfo"
import _ from 'lodash'
export default {
  data() {
    return {
      currentPage1: 1,
      tableData: [],
      total:0,
      pageSize:15,
      scanType:1,//1：订单 2：交易
    };
  },
  created(){
      this.getList()
  },
  methods: {
    strTrans(d){
      if(d == undefined){
          return ''
      }else{
          return d.substring(0,6)+'...'+d.substring(d.length-5,d.length-1)
      }

    },
      getList(){
          TradeInfoList({scanType:1}).then((res)=>{
            this.tableData = res.data.list
            this.total = res.data.total
          })
      },
      handleDelete(row){
        TradeInfoDel({id:row.id}).then((res)=>{
          if(res.code==0){
            this.$message.success('删除成功')
            this.getList()
          }else{
            this.$message.error(res.data)
          }
        })
      },
    handleSizeChange() {},
    handleCurrentChange() {},
  },
};
</script>
<style lang="scss" scoped>
.spanColor{
  color: #2EB0C6;
}
</style>
